<template>
  <view class="list">
    <view class="pin" v-for="(item, index) in arr" :key="index">
      <view class="avatar">
        <image :src="setUrl(item.avatar)" mode="aspectFill" class="img" v-if='item.avatar'></image>
        <image src="../../static/logo.png" mode="aspectFill" class="img" v-else></image>
      </view>
      <view class="right">
        <view class="name">{{ item.nickname }} <text class="icon" v-if="item.is_my && type == 'theme'">作者</text></view>
        <view class="content">{{ item.content }}</view>
        <view class="under">
          <view class="area">
            <view class="time">{{ timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss') }}</view>
            <view class="call" @click="reply(item, 1)">回复</view>
          </view>
          <view class="like" @click="callLike(item)">
            <view class="icon">
              <image src="../../static/tip3-1.png" class="img" v-if="item.is_praise"></image>
              <image src="../../static/tip3.png" class="img" v-else></image>
            </view>
            <view class="number">{{ item.like_num }}</view>
          </view>
        </view>
        <view class="thing" v-if="item.sub_count && !item.children">
          <uv-icon name="arrow-down" labelPos='left' :label="`展开全部${item.sub_count}条评论`" labelColor='#465B89' labelSize='24rpx' space='8rpx' size='30rpx' @click='getMore(item)'></uv-icon>
        </view>
        <view class="list child" v-if="item.children && item.children.length">
          <view class="pin" v-for="(dt, idx) in item.children" :key="idx" @click="reply(dt, 2)">
            <view class="right">
              <view class="content" v-if='dt.pid != 0'><text class="she">{{ dt.nickname }}</text> 回复 <text class="she">{{ dt.reply_comment_nickname }}</text> {{ dt.content }}</view>
              <view class="content" v-else>{{ dt.content }}</view>
              
              <view class="under">
                <view class="area">
                  <view class="time">{{ timeFormat(dt.createtime, 'yyyy-mm-dd hh:MM:ss') }}</view>
                </view>
                <view class="like" @click.stop="callLike(dt)">
                  <view class="icon">
                    <image src="../../static/tip3-1.png" class="img" v-if="dt.is_praise"></image>
                    <image src="../../static/tip3.png" class="img" v-else></image>
                  </view>
                  <view class="number">{{ dt.like_num }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { post } from '@/api';
import { setUrl } from '@/common';

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  type: {
    type: String
  },
})
const emit = defineEmits(['click']);
const obj = {
  theme: {
    likeUrl: 'api/association_theme/likeThemeComment',
    nextUrl: 'api/association_theme/themeSubCommentList',
  },
  news: {
    likeUrl: 'api/news/likeNewsComment',
    nextUrl: 'api/news/newsSubCommentList',
  },
  answer: {
    likeUrl: 'api/association_answer/likeAnswerComment',
    nextUrl: 'api/association_answer/answerSubCommentList',
  }
}
let arr = ref([]);

onMounted(() => {
  arr.value = props.list;
})

// 评论点赞
function callLike(row){
  const params = {
    comment_id: row.id,
    way: row.is_praise == 1 ? 2 : 1
  }
  let url = obj[props.type].likeUrl;
  post(url, params).then(res => {
    if(res.code == 1){
      if(row.is_praise == 1){
        row.is_praise = 0;
        row.like_num--;
      }else{
        row.is_praise = 1;
        row.like_num++;
      }
    }
  })
}
// 获取二级评论列表
function getListDown(pid){
  const params = {
    pid: pid
  }
  let url = obj[props.type].nextUrl;
  post(url, params).then(res => {
    if(res.code == 1){
      const { data } = res.data;
      const index = arr.value.findIndex(o => o.id == pid);
      arr.value[index].children = data;
    }
  })
}
// 点击查看更多评论
function getMore(row){
  getListDown(row.id);
}
function reply(row, value){
  emit('click', {
    peoper: uni.$uv.deepClone(row),
    ladder: value
  })
}
</script>

<style lang="scss" scoped>
  .list{
    padding-top: 32rpx;
    &.child{
      padding-top: 24rpx;
      .pin{
        padding-bottom: 24rpx;
        .avatar{
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
    .pin{
      width: 100%;
      display: flex;
      align-items: flex-start;
      padding-bottom: 32rpx;
      .right{
        flex: 1;
        width: 0;
        padding-left: 16rpx;
        .thing{
          display: flex;
          padding-top: 20rpx;
        }
        .under{
          padding-top: 8rpx;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .area{
            display: flex;
            align-items: center;
            .time{
              font-weight: 400;
              font-size: 24rpx;
              color: #999999;
            }
            .call{
              font-weight: 500;
              font-size: 24rpx;
              color: #465B89;
              margin-left: 32rpx;
            }
          }
          .like{
            display: flex;
            align-items: center;
            .number{
              padding-left: 4rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #999999;
            }
            .icon{
              width: 24rpx;
              height: 24rpx;
              font-size: 0;
            }
          }
        }
        .content{
          padding-top: 4rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #2B2B2B;
          .she{
            color: #999999;
            font-size: 28rpx;
            font-weight: 400;
            padding: 0 4rpx;
          }
        }
        .name{
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          padding-top: 8rpx;
          .icon{
            font-weight: 400;
            font-size: 20rpx;
            color: #FFFFFF;
            height: 32rpx;
            line-height: 32rpx;
            padding: 0 12rpx;
            border-radius: 32rpx;
            background-color: #E43222;
          }
        }
      }
      .avatar{
        width: 70rpx;
        height: 70rpx;
        overflow: hidden;
        border-radius: 50%;
        font-size: 0;
      }
    }
  }
</style>